<template>
  <div class="index">
    <div class="container">
      <div class="row">
        <div class="sm8">
          <articleGrid v-for="article in articleList" :key="article.id" :article="article"></articleGrid>

          <div class="pagination">
            <el-pagination
              v-if="total > page_size"
              layout="total, prev, pager, next, jumper"
              @current-change="skipPage"
              :page-size="page_size"
              :total="total">
            </el-pagination>
          </div>
        </div>
        <div class="sm4">
          <sidebar></sidebar>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import sidebar from '@/components/sidebar/sidebar'
import articleGrid from '@/components/grid/articleGrid'

export default {
  name: 'search',
  data () {
    return {
      articleList:[],
      page_size:10,
      total: 10,
      category_id: 0,
    }
  },
  created: function(){
    this.fetchData();
  },
  methods: {
    skipPage(page){
      this.search(page);
    },
    search(page){
      this.$http.post('/api/article/search', {'searchKey': this.$route.params.searchKey,'page':page}).then(function(result){
        var data = result.body.data;
        this.articleList = data['list'];
        this.page_size = data['page_size'];
        this.total = data['total'];
      })
    },
    fetchData () { 
      this.category_id = this.$route.params.id;
      this.search(1);
    }

  },
  components: {sidebar, articleGrid},
  watch: {
    '$route': 'fetchData'
  },

}

</script>

<style type="text/css">
  
</style>